<template>
    <div class="category-box">
        <div class="category-action-bar">
            <el-button
                type="primary"
                size="mini"
                @click="showAddCategory()">添加分类
            </el-button>
        </div>

        <div class="category-list-box">
            <el-table
                v-loading="loading"
                class="table-class"
                :data="categories"
                style="width: 100%"
            >
                <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="分类名称"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="pinyin"
                    label="拼音"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="description"
                    label="描述"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status==='0'">
                            <el-tag type="danger">已删除</el-tag>
                        </div>
                        <div v-if="scope.row.status==='1'">
                            <el-tag type="danger">正常</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    width="120">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.createTime)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="更新时间"
                    width="120">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.updateTime)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="danger"
                                   size="mini"
                                   @click="deleteItem(scope.row)"
                                   :disabled="scope.row.status==='0'">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--        弹窗部分-->
        <div class="category-dialog-box">
            <!--            删除分类的弹窗-->

            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="400px">
                <span>你确定要删除:{{ deleteMessage }} 这个分类吗?</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doDeleteItem()">确 定</el-button>
              </span>
            </el-dialog>

            <!--            添加分类的弹窗-->
            <el-dialog
                @close="resetData"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :title="editTitle"
                :visible.sync="editorDialogVisible"
                width="500px">
                <div class="category-editor-box">
                    <el-form ref="form" label-width="80px">
                        <el-form-item
                            label="分类名称">
                            <el-input v-model="category.name" placeholder="分类名称"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="分类描述">
                            <el-input v-model="category.description"
                                      placeholder="分类描述"
                                      type="textarea"
                                      :maxlength="128"
                                      :rows="2"
                                      resize="none"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="顺序">
                            <el-input-number v-model="category.order"
                                             :min="1"
                                             :max="10"></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="分类拼音">
                            <el-input v-model="category.pinyin" placeholder="分类拼音"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="状态">
                            <el-select v-model="category.status" placeholder="请选择分类状态">
                                <el-option
                                    label="正常"
                                    value="1">
                                </el-option>
                                <el-option
                                    label="禁用"
                                    value="0">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editorDialogVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="postAndPutCategory()"
                >{{ this.editorBtnText }}
                </el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {success_code} from "@/utils/ResponseState";
import {formatDate} from "@/utils/date";
import {deleteCategoryById, listCategories, postCategory, putCategory} from "@/api/categoryAdminApi";

export default {
    name: "manage-category",

    data() {
        return {
            categories: [],
            dialogVisible: false,
            deleteMessage: "",
            deleteItemId: "",
            editTitle: "添加",
            editorBtnText: "",
            editorDialogVisible: false,
            category: {
                id: '',
                name: '',
                description: '',
                order: 1,
                pinyin: '',
                status: '1',
            },
            loading: false
        }
    },
    methods: {
        edit(item) {
            // change data
            this.category.id = item.id;
            this.category.name = item.name;
            this.category.description = item.description;
            this.category.status = item.status;
            this.category.pinyin = item.pinyin;
            this.category.order = item.order;
            // change ui
            this.editorDialogVisible = true;
            this.editTitle = "更新分类"
            this.editorBtnText = "更 新"
        },
        deleteItem(item) {
            this.dialogVisible = true;
            this.deleteMessage = item.name;
            this.deleteItemId = item.id;
            // console.log(item);
        },
        doDeleteItem() {
            deleteCategoryById(this.deleteItemId).then(result => {
                if (result.code === success_code) {
                    this.$message({
                        type: 'success',
                        center: true,
                        message: result.message
                    })
                } else {
                    this.$message.error(result.message);
                }

                this.initData();
            })

            this.dialogVisible = false;
        },
        formatDate(dataStr) {
            let date = new Date(dataStr);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        },
        initData() {
            this.loading = true;
            listCategories().then(result => {
                if (result.code === success_code) {
                    this.categories = result.data;
                    console.log(result.data);
                } else {
                    console.log(result.message);
                }
            })

            this.loading = false;
        },
        showAddCategory() {
            this.editTitle = '添加分类';
            this.editorBtnText = '添 加';
            this.editorDialogVisible = true;
        },
        postAndPutCategory() {
            // check data
            if (this.category.name === "") {
                this.$message({
                        type: "warning",
                        center: true,
                        message: "分类名称不能为空"
                    }
                )
                return;
            }

            if (this.category.description === "") {
                this.$message({
                        type: "warning",
                        center: true,
                        message: "分类描述不能为空"
                    }
                )
                return;
            }
            if (this.category.pinyin === "") {
                this.$message({
                        type: "warning",
                        center: true,
                        message: "分类拼音不能为空"
                    }
                )
                return;
            }


            if (this.category.id === '') {
                postCategory(this.category).then(result => {
                    if (result.code === success_code) {
                        this.$message({
                            type: 'success',
                            center: true,
                            message: result.message
                        })

                        this.initData()
                    } else {
                        this.$message.error(result.message);
                    }
                });
            } else {
                putCategory(this.category).then(result => {
                    if (result.code === success_code) {
                        // change ui state
                        this.$message.success(result.message)

                        this.initData()
                    } else {
                        // change ui state
                        this.$message.error(result.message);
                    }
                });
            }

            this.resetData();
            this.editorDialogVisible = false
        },
        resetData() {
            this.category.id = '';
            this.category.name = '';
            this.category.description = '';
            this.category.order = 1;
            this.category.pinyin = '';
            this.category.status = '1';
        }
    },
    mounted() {
        // init data
        this.initData();
    }
}
</script>

<style>
.category-list-box .el-table {
    font-weight: 500;
    color: black;
    min-height: 300px;
}

.table-class {
    font-size: 15px;
}
</style>